<script setup>
import HelloWorld from './components/HelloWorld.vue';
import { reactive } from 'vue';

const MenuData = reactive([
  {
    txt: '登录',
    current: true,
    type: 'login',
  },
  {
    txt: '注册',
    current: false,
    type: 'login',
  },
]);
// 核心代码
let clickMenu = (item) => {
  MenuData.forEach((elemt) => {
    elemt.current = false;
  });
  item.current=true
};
</script>

<template>
  <div class="login">
    <div class="login-con">
      <ul class="menu-tab">
        <li v-for="v in MenuData" :class="{current:v.current}" :key="v.type" @click="clickMenu(v)">
          {{ v.txt }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
  .login{
    background-color: aquamarine;
    height: 100%;
  }
  html,
  body,
  #app{
    height: 100%;
  }
  .menu-tab{
    text-align: center;
    
  }
  .menu-tab li{
    display: inline-block;
    width:88px;
    line-height:36px;
    font-size: 14px;
    color: aliceblue;
    border-radius: 2px;
    /* 鼠标移入 */
    cursor: pointer;
  }
  .current{
    background-color: rgba(255, 255, 255, .5);
  }
</style>
